<template>
	<view class="page">
		<view class="body-box">
			<view class="line">
				<button class="avatar-but" open-type="chooseAvatar" @chooseavatar="chooseavatar">
					<text>头像</text>
					<view class="line-right">
						<image :src="info.image?info.image:'../../static/my/header_user.png'"
							style="border-radius: 50%;width: 104rpx;height: 104rpx;"></image>
						<u-icon name="arrow-right" size="28" color="#999"></u-icon>
					</view>
				</button>
			</view>

			<view class="line" @click="toPage('/subpkg/userInfo/updateNickName')">
				<text>昵称</text>
				<view class="line-right">
					<text>{{info.nickName}}</text>
					<u-icon name="arrow-right" size="28" color="#999"></u-icon>
				</view>
			</view>
			<view class="line">
				<text>手机号</text>
				<text style="padding-right: 30rpx;">{{info.phoneMobile}}</text>
			</view>
		</view>
		<view class="body-box" @click="logout()" style="height: 112rpx;justify-content: center;">
			<view style="text-align: center;padding: 20rpx 0;" >
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getShopListApi
	} from '../../common/api/Salesman.js'
	import {
		getUserInfoApi,
		editUserInfoApi
	} from '../../common/api/userInfoApi.js'
	import {
		mapSalesmanList
	} from '../../utils/filter.js'
	import {
		submitMaterialsApi
	} from '../../common/api/ossApi.js'
	export default {
		data() {
			return {
				statusHeight: 0,
				userId: '',
				info: {},
				showMask: false,
				dialogTitle: '',
				value: '',
				type: '',
				pageNum: 1,
				pageSize: 10,
				ShopList: [],
				selectShop: {},
				selectShopValue: ''
			};
		},
		computed: {
			...mapState('user', ['ylUserId', 'ylProjectCode', 'ylUserInfo'])
		},
		methods: {
			...mapMutations('user', ['MusetUserInfo','MudelToken']),
			clickLeft() {
				// if (!this.info.enterpriseCode) {
				// 	return uni.$showMsg('还未绑定门店,请先绑定门店')
				// }
				// wx.switchTab({
				// 	url: '/pages/my/my'
				// })
				uni.navigateBack()
			},
			async getUserInfo() {
				const res = await getUserInfoApi()
				this.info = res.data
				this.selectShop = {
					value: this.info.enterpriseCode,
					text: this.info.enterpriseName
				}
				this.selectShopValue = this.info.enterpriseCode
				this.MusetUserInfo(this.info)
			},
			async editInfo(type) {
				this.type = type
				this.showMask = true
				if (type === 'nickName') {
					this.dialogTitle = '编辑昵称'
					this.value = this.info[type]
				} else if (type === 'age') {
					this.dialogTitle = '编辑年龄'
					this.value = this.info[type]
				} else if (type === 'phone') {
					this.dialogTitle = '编辑手机号'
					this.value = this.info[type]
				}
			},
			// 修改头像
			async chooseavatar(e) {
				this.info.image = e.detail.avatarUrl
				// 获取oss签名
				const res = await submitMaterialsApi()
				this.action = res.data.host
				const Num = res.data.dir + Date.now() + '.' + this.info.image
				this.formData = {
					'key': Num,
					'policy': res.data.policy,
					'OSSAccessKeyId': res.data.accessKeyId,
					'signature': res.data.signature
				}
				// 上传到oss
				wx.uploadFile({
					url: this.action,
					filePath: this.info.image,
					name: 'file', // 必须填file。
					formData: this.formData,
					success: async (res1) => {
						if (res1.statusCode === 204) {
							const pictureUrl = res.data.host + '/' + Num
							console.log('上传成功', pictureUrl);
							this.info.image = pictureUrl
							this.info.id = this.info.userId
							this.changeInfo()
						}
					},
					fail: err => {
						uni.$showMsg('上传图片失败')
					}
				});

			},

			async changeInfo() {
				this.info.enterpriseCode = this.selectShop.value
				this.info.enterpriseName = this.selectShop.text
				this.info.id = this.info.userId
				this.info.miniappKey = this.info.miniKey
				this.info.phone = this.info.phoneMobile
				this.info.gender = this.info.sex
				this.info.memberCode = this.info.username
				const res = await editUserInfoApi(this.info)
				uni.$showMsg(res.message)
				await this.getUserInfo()
				// wx.switchTab({
				// 	url: '/pages/my/my'
				// })
			},
			blurIpt(e) {
				if (this.type === 'age') {
					this.value = +e.detail.value.trim()
				} else {
					this.value = e.detail.value.trim()
				}
			},
			async saveInfo() {
				this.info[this.type] = this.value
				this.value = ''
				this.showMask = false
			},
			async getShopList() {
				const res = await getShopListApi({
					projectCode: this.ylProjectCode,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				})
				this.ShopList.push(...mapSalesmanList(res.data.records, 'shop'))
				this.shopTotal = res.data.total
				if (this.ShopList.length < this.shopTotal) {
					this.pageNum = this.pageNum + 1
					this.getShopList()
				}
			},
			changeShop(e) {
				this.selectShop = this.ShopList.find(item => item.value === e)
				this.selectShopValue = this.selectShop.enterpriseCode
			},
			toPage(url){
				uni.navigateTo({
					url: url
				})
			},
			logout(){
				uni.reLaunch({
					url: '/pages/home/home'
				})
				this.MudelToken()
			}
		},
		async onLoad(option) {
			this.userId = this.ylUserId
			const res = await wx.getSystemInfoSync()
			this.statusHeight = res.statusBarHeight

			await this.getUserInfo()
			// await this.getShopList()
			if (option.enterpriseCode) {
				console.log(option.enterpriseCode, 'option.enterpriseCode')
				//有enterpriseCode 企业编码
				if (!this.info.enterpriseCode) {
					this.selectShop = this.ShopList.find(item => item.value === option.enterpriseCode)
					await this.changeInfo()
				} else {
					uni.switchTab({
						url: '/pages/home/home'
					})
				}
			} else if (option.perch) {
				if (this.info.enterpriseCode) {
					uni.switchTab({
						url: '/pages/home/home'
					})
				}
			}
		},
		onShow() {
			this.getUserInfo()
		}
	}
</script>
<style>
	page{
		background: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.input_avatar {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 32rpx;
		margin-bottom: 32rpx;
		border-style: hidden !important;
		width: 200rpx;

		image {
			width: 120rpx;
			height: 120rpx;
		}

		text {
			color: #CCCCCC;
			font-size: 24rpx;
			margin-top: 10rpx;
		}
	}

	.item {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.right {
			display: flex;
			align-items: center;

			text {
				color: #ababab;
				font-size: 26rpx
			}
		}
	}

	.mask {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 10;
	}

	.dialog {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 500rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		background-color: #fff;

		.title {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 40rpx;
		}
	}

	.select {
		padding: 0 40rpx;
		flex: 1;
	}

	.body-box {
		margin: 32rpx;
		padding: 10rpx 32rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		color: #000;
	}

	.line {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// border-bottom: 1rpx solid #F2F2F2;
		// margin: 20rpx 0;
		padding: 40rpx 0;

		/deep/ button::after {
			border: none !important;
		}
	}

	.line-right {
		display: flex;
		align-items: center;
	}

	.avatar-but {
		display: flex;
		justify-content: space-between;
		width: 100%;
		font-size: 28rpx;
		background-color: white;
		padding: 0rpx;

	}
</style>